<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度</title>
    <style>
        .Box1{
            width:400px;
            height:400px;
            background-color:#000;
        }
        .Box2{
            width:300px;
            height:300px;
            background-color:#f00;
            z-index: 1;
            opacity: 0.5;
            zoom:2;
        }
        .Box3{
            width:200px;
            height:200px;
            background-color:#0f0;
        }
        .Box4{
            width:100px;
            height:100px;
            background-color:#00f;
        }
        div{
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
<div class="Box1"></div>
<div class="Box2"></div>
<div class="Box3"></div>
<div class="Box4"></div>
</body>
</html>